<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>CV</title>
    <style>
      .hidden {
        display: none;
      }
      body {
        margin: 0;
        font: 14px/1.5 Arial;
        color: #666;
        background: #efefef;
      }
      .layout {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
      }

      #page {
        display: flex;
        flex-wrap: wrap;
        background: #fff;
        margin-top: 10px;
        margin-bottom: 10px;
      }

      header {
        background: #3c3c3c;
        width: 100%;
        text-align: center;
        padding: 60px 0 10px 0;
        color: #fff;
      }

      header > h1 {
        font-size: 30px;
        margin-bottom: 0;
      }

      header > p {
        font-size: 14px;
        color: #aaa;
        margin: 0;
      }

      aside {
        width: 240px;
        border-right: 1px solid #ccc;
        position: relative;
        padding-top: 100px;
      }

      aside .avatar {
        text-align: center;
        position: absolute;
        top: -80px;
        width: 100%;
      }

      aside .avatar img {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        border: 1px solid #ccc;
        background: #ccc;
      }

      section {
        border-bottom: 1px solid #ccc;
        margin: 30px 20px 0 20px;
        padding-bottom: 20px;
      }

      section h2 {
        color: #5c99ca;
        font-size: 16px;
      }

      section h3 {
        font-size: 16px;
        color: #333;
      }

      section a {
        color: #333;
      }

      .personal .item span:first-child {
        display: inline-block;
        width: 80px;
      }

      .personal .item span:last-child::before {
        content: ":";
        margin-right: 10px;
      }

      .skills .item {
        display: flex;
        align-items: center;
      }

      .skills .keyword {
        width: 80px;
      }

      .skills .rule {
        flex: 1;
        height: 4px;
        background: #ccc;
      }

      .skills .rule i {
        display: block;
        width: 10%;
        height: 4px;
        background: #000;
      }

      .contact .item {
        display: flex;
        align-items: center;
      }
      .contact svg {
        width: 25px;
        height: 25px;
      }

      .contact .item span {
        margin-left: 10px;
      }

      main {
        flex: 1;
        min-height: calc(100vh - 162px);
      }
      .wx-hover {
        position: relative;
      }
      .wx-hover img {
        display: none;
        position: absolute;
        top: 30px;
        left: 0px;
        width: 200px;
        height: 200px;
      }
      .wx-hover .wxid:hover + img {
        display: block;
      }
      @media (max-width: 768px) {
        header {
          padding-top: 20px;
          padding-bottom: 90px;
        }
        aside {
          width: 100%;
          padding-top: 0px;
        }
        aside .avatar img {
          width: 100px;
          height: 100px;
        }
      }
      @media print {
        @page { margin: 0; }
        body { margin: 1cm; }
      }
    </style>
    <style media="print" type="text/css">
      .print:last-child {
          page-break-after: always;
      }
      html, body {
        height:100vh; 
        margin: 10px !important; 
        padding: 0 !important;
      }
      @page{
        margin: 0cm;
      }
      .page-header1{
        margin-top: 75px;
      }
      .page-footer{
        margin-bottom: 30px;
        border-bottom: 1px solid transparent;
      }
      .noprint {
        display:none
      }
      section {
        border-bottom: 1px solid #ccc;
        margin: 20px 20px 0 20px;
        padding-bottom: 1px;
      }
      .page-break{
        page-break-after:always;
        display:block;
        clear: both;
      }
      .img-wrap .img1{
        position: absolute;
        bottom: 0;
        left: 250px;
      }
      .img-wrap{
        position: relative;
        padding-bottom: 200px;
      }
      section h3{
        margin-top: 10px;
        margin-bottom: 10px;
      }
      aside{
        border:none;
      }
      /* img{
        margin: 0;
        display:block;
        page-break-before:auto;
        page-break-after:auto;
        page-break-inside:avoid;
      } */
      /* p,em,li,span,tr{ 
          page-break-inside:avoid; 
          page-break-after:avoid;
      } */
  </style>
  </head>
  <body>
    <div class="layout" id="page">
      <header>
        <h1>应聘前端工程师</h1>
        <p>王玮</p>
      </header>
      <aside>
        <div class="avatar">
          <img src="./avatar.jpg" alt="头像" />
        </div>

        <section>
          <h2>基础信息</h2>
          <div class="detail personal">
            <div class="item">
              <span>学历</span>
              <span>天津理工大学，本科</span>
            </div>
            <div class="item">
              <span>工作经验</span>
              <span>5年</span>
            </div>
            <div class="item">
              <span>意向薪资</span>
              <span>18~25k</span>
            </div>
          </div>
        </section>
        <section class="noprint">
          <h2>专业技能</h2>
          <div class="detail skills">
            <div class="item">
              <span class="keyword">熟悉页面制作技巧，能将设计稿完美还原</span>
            </div>
            <div class="item">
              <span class="keyword">html/css3</span>
              <span class="rule"><i style="width: 70%"></i></span>
            </div>
            <div class="item">
              <span class="keyword">vue</span>
              <span class="rule"><i style="width: 80%"></i></span>
            </div>
            <div class="item">
              <span class="keyword">react</span>
              <span class="rule"><i style="width: 60%"></i></span>
            </div>
            <div class="item">
              <span class="keyword">java</span>
              <span class="rule"><i style="width: 60%"></i></span>
            </div>
          </div>
        </section>

        <section>
          <h2>联系方式</h2>
          <div class="detail contact">
            <div class="item">
              <svg><use xlink:href="#icon-phone" /></svg>
              <a href="tel:13752665010"><span>13752665010</span></a>
            </div>
            <div class="item">
              <svg><use xlink:href="#icon-email" /></svg>
              <a href="mailto:weiainijiujiu@126.com"
                ><span>weiainijiujiu@126.com</span></a
              >
            </div>
            <div class="item wx-hover">
              <svg><use xlink:href="#icon-wechat" /></svg>
              <a class="wxid" onclick="copyContent(this);" title="点击复制" href="javascript: void"
                ><span>wangxiaowei716889</span></a
              >
              <img src="./wechatjpeg" alt="微信二维码" />
            </div>
            <div class="item">
              <svg><use xlink:href="#icon-city" /></svg>
              <span>天津</span>
            </div>
          </div>
        </section>
      </aside>
      <main>
        <section>
          <h2>关于我</h2>
          <p>
            5年前端开发经验，对Vue技术栈有较为深刻的掌握和理解，熟悉模块化、工程化开发流程。熟练掌握React，熟练掌握ES6写代码，有小程序、移动端开发经验。熟悉JAVA语言,
            对后台开发也有一定的了解认识。
          </p>
        </section>
        <section>
          <h2>工作经历</h2>
          <div class="item" >
            <h3>佰邦达科技(天津)有限公司（2014~2015）</h3>
            <ul>
              <li>
                工作期间参与开发和维护航空部分的移动端业务产品，为航空公司乘客移动端提供支撑。
              </li>
              <li>参与公司前端编码规范的制定、部分前端UI组件库的开发。</li>
              <li>多次参与项目立项到上线整个过程。</li>
            </ul>
          </div>
          <div class="item" >
            <h3>天津恒达文博科技股份有限公司（2015~2017）</h3>
            <ul>
              <li>
                工作期间作为主程, 开发了文博在线PC站、H5站以及小程序产品,
                带领同期实现了公司网站产品从零到一的突破
              </li>
              <li>
                指导公司前端编码规范的制定、工作流程以及前端业务组件的开发整合。
              </li>
              <li>多次作为前端项目负责人主导项目立项到上线整个过程。</li>
            </ul>
          </div>
          <div class="item ">
            <h3>北京民航信息科技有限公司（天津分公司）（2017至今）</h3>
            <ul>
              <li class="">
                工作期间作为项目组前端主程，负责新项目的开发，参与项目的需求讨论以及一定的页面原型设计工作。还主要负责了遗留项目的整个的重构设计、迭代开发以及日常的维护。
              </li>
              <li >参与主导公司前端项目编码规范的制定、前端通用平台的开发。</li>
              <li>
                多次作为前端项目负责人主导项目立项到上线整个过程，配合后台完成上线工作，以及线上问题排查。
              </li>
            </ul>
          </div>
        </section>
        <section class="page-header1 clear">
          <h2>项目经历</h2>
          <div class="item">
            <h3>vue-admin-starter——通用后台综合平台开发</h3>
            <ul>
              <li>
                项目介绍: 项目功能包含航线申报及模拟，执行率图表展示，用户权限控制、数据导入，各种情况的查询与结果展示。为 了保证基础组件的代码质量，采用了jest作为单元测试。开发过程过中代码经过多次重构，目前功能可以很容易进行扩展。 在开发过程中遇到了很多需要组件定制化的情况，通过不断重构和自测，保证了组件不出大的问题。我除了正常的开发，还 会负责前端项目的上线部署和文档整理工作。目前项目稳定运行，据客户反馈，提升了他们80%数据整理工作效率。              </li>
              <li>
                技术栈:vue、vue-routers、vuex、element-ui、webpack、jest、swagger2</li>
              <li>
                预览项目: 
                <a href="http://119.254.234.92:10780/adp"
                  >点击查看(admin/123123)</a
                >
              </li>
            </ul>
          </div>
          <div class="item">
            <h3>vue-admin-starter——通用后台综合平台开发</h3>
            <ul>
              <li>
                该项目是为了解决之前项目开发中，规范不统一，公用业务逻辑复用等问题。该项目前端部分，由我独立开发。项目的功能有公用的查询组件，异步操作请求，通用的基础表单组件。能够提供稳定的公用业务组件。好处是公司整体项目代码风格统一。目前是公司其他前端项目的通用种子项目，已经成功为公司后续80%的项目提供基础支持。
              </li>
              <li>
                技术栈：vue、vue-router、vuex、element-ui、element-amdin、webpack、es6
              </li>
              <li>
                预览项目:
                <a href="http://wangjojo.gitee.io/vue-element-admin/"
                  >点击查看</a
                >(账号/密码：admin/admin)
              </li>
            </ul>
          </div>
          <div class="item img-wrap clear">
            <div>
              <h3>网抑云音乐H5</h3>
              <ul>
                <li>
                  项目介绍：
                  该项目是移动端仿造网易云音乐开发的，前后端由我独立完成。包含的功能有：基本的歌曲播放功能、切换播放模式功能、动态歌词显示、搜索功能以及所有的动画效果。后端使用开源的node项目提供相关api服务功能。
                </li>
                <li>
                  技术栈：React16、React Hooks、React
                  Router、Redux、styled-component
                </li>
                <li>项目源码: https://github.com/wweggplant/cloud-music </li>
                <li>
                  手机扫描下方二维码，预览项目, 或<a
                    href="http://wangjojo.gitee.io/react-cloud-music/#/recommend"
                    >点击查看</a> <br>
                </li>
              </ul>
            </div>
            <img
            class='img1'
              src="网抑云.png"
              alt="网抑云"
          />
          </div>
        </section>
        <section>
          <h2>开源项目</h2>
          <div class="item">
            <h3>PostMessager——跨窗口通信工具库</h3>
            <ul>
              <li>
                项目介绍：
                本项目目的是为了解决遗留系统中存在的跨窗口双工通信问题。提供了主页面和子iframe通信功能、主页面与新窗口的通信功能。整个项目是由我独立开发完成，目前该项目已经成功应用在公司的各种重大项目中，解决了之前项目通知不及时的问题，并最终赢得了客户领导的认可。
              </li>
              <li>技术栈：typescript、es6、rollup</li>
              <li>项目源码:https://github.com/wweggplant/postMessager</li>
              <li>
                预览项目:
                <a href="https://wangjojo.gitee.io/postmessager/demo/sample/"
                  >点击查看</a
                >
              </li>
            </ul>
          </div>
          <div class="item">
            <h3>WhiteBoard——基于Canvas在线画板</h3>
            <ul>
              <li>
                项目介绍：
                项目功能包含基本的画笔功能，矩形和圆形绘制、橡皮檫、线条颜色设置、重做撤回功能以及保存成图片功能。开发过程中代码经过多次重构，目前功能可以很容易进行扩展。在开发重做撤回功能过程中，遇到了各种处理问题，我通过编写单元测试，提高了测试效率，最后解决了问题。
              </li>
              <li>技术栈：React、React Hooks、canvas</li>
              <li>项目源码:https://github.com/wweggplant/WhiteBoard</li>
              <li>
                预览项目:<a href="http://wangjojo.gitee.io/white-board/">点击查看</a>
              </li>
            </ul>
          </div>
        </section>
        <section>
          <h2>个人评价</h2>
          <p>
            喜欢承担有技术难度的工作，热爱分享，谦虚好学。责任感强力、有自觉提升的的意识。
          </p>
        </section>
      </main>
    </div>
    <input id="copy_content" type="text" value=""  style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;"/>
    <script>
      function copyContent(ElementObj) {
        //获取点击的值
        var clickContent = ElementObj.innerText;
        //获取要赋值的input的元素
        var inputElement = document.getElementById("copy_content");
        //给input框赋值
        inputElement.value = clickContent;
        //选中input框的内容
        inputElement.select();
        // 执行浏览器复制命令
        document.execCommand("Copy");
        //提示已复制
        alert("已复制");
      }
    </script>
    <svg style="display: none"> <symbol id="icon-phone" viewBox="0 0 1024 1024"> <path d="M493.3778059 449.15009529c16.29441978 4.65554869 32.58883953 13.96664542 41.8999369 27.93329083 9.31109674 13.96664542 13.96664542 32.58883953 9.31109673 51.21103365-2.32777434 6.98332303 0 16.29441978 4.65554869 20.94996845 4.65554869 6.98332303 11.63887108 11.63887108 18.62219411 11.63887109h4.65554804c6.98332303 0 11.63887108-2.32777434 16.29441978-4.65554869 6.98332303-4.65554869 11.63887108-11.63887108 11.63887172-18.62219412 13.96664542-67.50545341-30.26106518-135.01090681-95.43874491-148.97755159h-4.65554804c-13.96664542 0-25.60551651 9.31109674-27.93329149 23.27774215-2.32777434 6.98332303 0 16.29441978 4.65554869 23.27774279 2.32777434 9.31109674 9.31109674 13.96664542 16.29441977 13.96664543z" fill="#FE5F5F" ></path> <path d="M525.96664542 346.72802801c39.57216256 9.31109674 72.1610021 32.58883953 93.11096991 65.17767906 20.94996846 34.91661388 30.26106518 74.48877579 20.94996845 114.06093836-2.32777434 16.29441978 6.98332303 32.58883953 23.27774279 34.91661387h4.65554805c6.98332303 0 11.63887108-2.32777434 16.29441977-4.65554868 6.98332303-4.65554869 11.63887108-11.63887108 11.63887172-18.62219411 11.63887108-55.86658233 0-111.73316403-30.2610652-158.28864897s-76.81655015-79.14432448-130.35535811-90.78319557h-4.6555487c-13.96664542 0-25.60551651 9.31109674-27.93329085 23.27774215-2.32777434 16.29441978 9.31109674 32.58883953 23.27774218 34.91661388zM623.73316403 640.02758378c-6.98332303-4.65554869-13.96664542-9.31109674-16.29441978-9.31109674-4.65554869-2.32777434-6.98332303-2.32777434-11.63887107-2.32777433-16.29441978 0-30.26106518 9.31109674-48.8832593 25.60551649-9.31109674 9.31109674-18.6221941 20.94996846-23.2777428 27.9332915-2.32777434 2.32777434-6.98332303 4.65554869-9.31109673 4.65554803-2.32777434 0-6.98332303-2.32777434-9.31109738-4.65554803-34.91661388-32.58883953-69.83322774-74.48877579-97.76651859-121.04426139-27.93329084-46.55548495-51.21103364-95.43874424-67.50545277-141.99422921-2.32777434-6.98332303 2.32777434-13.96664542 6.98332239-16.29441977 6.98332303-2.32777434 44.22771062-18.6221941 44.22771062-18.6221941 20.94996846-11.63887108 44.22771062-23.27774279 34.91661387-62.84990473-6.98332303-39.57216256-18.6221941-76.81655015-30.26106519-102.42206728-9.31109674-18.6221941-20.94996846-25.60551651-30.26106519-30.26106518-4.65554869-2.32777434-9.31109674-2.32777434-13.96664542-2.32777435-11.63887108 0-20.94996846 2.32777434-34.91661388 9.31109674-9.31109674 4.65554869-93.11096991 44.22771062-93.1109699 148.97755222 0 23.27774279 2.32777434 141.9942292 90.78319556 281.6606847 51.21103364 81.47209883 107.07761533 137.33868115 176.91084307 179.23861743 18.6221941 11.63887108 34.91661388 20.94996846 53.53880799 25.6055165 16.29441978 4.65554869 34.91661388 6.98332303 51.21103364 6.98332303 60.52213037 0 97.76651859-37.24438822 102.42206728-39.57216256 16.29441978-16.29441978 25.60551651-32.58883953 25.60551651-46.55548494 0-23.27774279-18.6221941-41.89993628-27.93329085-53.53880736-32.58883953-32.58883953-69.83322774-55.86658233-72.16100208-58.19435667z" fill="#FE5F5F" ></path> <path d="M570.19435602 204.73379879h-4.65554804c-13.96664542 0-25.60551651 9.31109674-27.93329148 23.27774218-2.32777434 6.98332303 0 16.29441978 4.65554868 23.27774278 4.65554869 6.98332303 11.63887108 11.63887108 18.62219412 11.63887109 60.52213037 11.63887108 111.73316403 48.88325931 146.64977789 102.42206728 34.91661388 53.53880798 46.55548495 116.3887127 32.58883953 179.23861741-2.32777434 6.98332303 0 16.29441978 4.65554868 20.94996845 4.65554869 6.98332303 11.63887108 11.63887108 18.62219411 11.63887108h4.65554806c6.98332303 0 11.63887108-2.32777434 16.29441976-4.65554869 6.98332303-4.65554869 11.63887108-11.63887108 11.63887171-18.62219409 30.26106518-160.61642332-69.83322774-316.57729858-225.79410301-349.16613749z" fill="#FE5F5F" ></path> </symbol> <symbol id="icon-wechat" viewBox="0 0 1024 1024"> <path d="M566.49955555 633.856c0-89.88444445 78.62044445-161.67822222 183.52355556-172.94222222 0-1.024 0.11377778-1.93422222 0.11377778-2.95822223 0-156.44444445-161.90577778-283.19288889-361.58577778-283.19288888S27.07911111 301.51111111 27.07911111 457.95555555c0 71.56622222 88.51911111 179.08622222 105.13066667 198.656 1.59288889 1.93422222 2.16177778 4.66488889 1.36533333 7.168l-28.21688889 87.72266667c-2.27555555 6.94044445 5.23377778 12.40177778 9.78488889 7.28177778l59.73333334-67.92533333c1.59288889-1.82044445 3.98222222-2.50311111 6.144-1.59288889 21.39022222 8.30577778 136.30577778 51.88266667 207.64444444 51.88266667 70.656 0 136.53333333-15.92888889 192.28444444-43.34933334-9.216-19.79733333-14.44977778-41.30133333-14.44977778-63.94311111z" fill="#00BF27" ></path> <path d="M245.07733333 398.67733333a39.48088889 34.47466667 90 1 0 68.94933334 0 39.48088889 34.47466667 90 1 0-68.94933334 0Z" fill="#FFFFFF" ></path> <path d="M463.18933333 398.67733333a39.48088889 34.47466667 90 1 0 68.94933334 0 39.48088889 34.47466667 90 1 0-68.94933334 0Z" fill="#FFFFFF" ></path> <path d="M589.48266667 633.856c0 81.92 84.76444445 148.36622222 189.32622222 148.36622222 37.31911111 0 97.50755555-22.75555555 108.77155556-27.19288889 1.13777778-0.45511111 2.38933333-0.11377778 3.18577777 0.91022222l31.28888889 35.61244445c2.38933333 2.73066667 6.37155555-0.22755555 5.12-3.75466667l-14.79111111-45.96622222c-0.45511111-1.25155555-0.11377778-2.73066667 0.68266667-3.75466666 8.64711111-10.24 55.06844445-66.56 55.06844444-104.10666667 0-81.92-84.76444445-148.36622222-189.32622222-148.36622223s-189.32622222 66.33244445-189.32622222 148.25244445z" fill="#00BF27" ></path> <path d="M817.83466667 602.79466667a20.70755555 18.09066667 90 1 0 36.18133333 0 20.70755555 18.09066667 90 1 0-36.18133333 0Z" fill="#FFFFFF" ></path> <path d="M703.71555555 602.79466667a20.70755555 18.09066667 90 1 0 36.18133334 0 20.70755555 18.09066667 90 1 0-36.18133334 0Z" fill="#FFFFFF" ></path> </symbol> <symbol id="icon-city" viewBox="0 0 1024 1024"> <path d="M466.66248369 707.35400192S260.32464969 515.07403426 260.32464969 373.27295196a256.74481032 256.74481032 0 1 1 513.48962143 0c0 141.80108308-206.01425068 333.75746741-206.01425068 333.75746741a70.46909775 70.46909775 0 0 1-101.13753674 0.35953591zM517.03350665 469.59270374a96.28379843 96.28379843 0 1 0 0-192.56759686 96.28379843 96.28379843 0 0 0 0 192.56759686z" fill="#F5A623" ></path> <path d="M392.99351299 702.28454114a33.86831117 33.86831117 0 0 0-0.82693344 7.47835364c0 36.42101824 58.99989261 65.90298787 131.80597649 65.90298786S655.81448589 746.18391301 655.81448589 709.76289478c0-2.51675371-0.28762919-5.03350665-0.82693345-7.47835364 79.2417816 18.94755878 132.66886331 54.54164357 132.66886331 95.34900413 0 60.68971286-118.07169271 109.87426723-263.68385971 109.87426723S260.32464969 858.32325813 260.32464969 797.63354527c0-40.80736056 53.39112757-76.40144534 132.6688633-95.34900413z" fill="#F5A623" ></path> </symbol> <symbol id="icon-email" viewBox="0 0 1295 1024"> <path d="M946.99116042 255.72468923A30.15003667 30.15003667 0 0 0 919.55462687 236.12716542L256.253822 233.11216159a30.15003667 30.15003667 0 0 0-27.13503282 18.3915226 44.92355456 44.92355456 0 0 0-3.01500326 20.20052411v472.14957277A47.63705768 47.63705768 0 0 0 269.51983855 798.42534744h637.07027251A47.63705768 47.63705768 0 0 0 949.70466355 743.85378107V271.7042083a45.52655544 45.52655544 0 0 0-2.71350313-15.97951907z" fill="#38B1E7" ></path> <path d="M929.20263868 750.48678906l-201.40224422-291.85235368a30.15003667 30.15003667 0 0 0-24.12002957-12.96451582l-226.12527412-4.22100503a30.15003667 30.15003667 0 0 0-25.32603076 12.96451583L246.90731091 750.48678906a30.15003667 30.15003667 0 0 0-2.11050279 30.15003666 30.15003667 30.15003667 0 0 0 26.5320325 17.78852172h633.1507682a30.15003667 30.15003667 0 0 0 26.83353211-16.28101982 30.15003667 30.15003667 0 0 0-2.11050224-31.65753856z" fill="#299ACC" ></path> <path d="M947.29266058 247.28267916A31.65753859 31.65753859 0 0 0 919.55462687 225.57465256H256.253822a30.15003667 30.15003667 0 0 0-27.73803314 18.39152204A30.15003667 30.15003667 0 0 0 235.14879687 276.52821421l260.79781595 254.46630871a138.99166868 138.99166868 0 0 0 189.34223003 0l255.37080975-250.24530367a30.15003667 30.15003667 0 0 0 6.63300798-33.46654009z" fill="#6AC1E7" ></path> </symbol> </svg>
  </body>
</html>